<template>
    <div style="text-align:left;">
        <div style="padding-top: 70px;padding-left:40px;width:100%;height: 520px;" class="sougou">
            <div style="float:left;width:30%;">
                <p class="parpOne"  style="font-weight:600">搜狗搜索</p>
                <dl>
                    <dd><img src="../../../assets/img/2-indexMedia/SEM/搜狗/0.png" alt=""><span>全网覆盖</span></dd>
                    <dd><img src="../../../assets/img/2-indexMedia/SEM/搜狗/0.png" alt=""><span>精确定向</span></dd>
                    <dd><img src="../../../assets/img/2-indexMedia/SEM/搜狗/0.png" alt=""><span>免费展现</span></dd>
                    <dd><img src="../../../assets/img/2-indexMedia/SEM/搜狗/0.png" alt=""><span>智能管理</span></dd>
                </dl>
                <div class="OneBtn">
                    <button v-for="(item,index) in list" :key="index" @mouseover="toggle(index)" class="btnAll" :class="{backgWhite:liIndex!=index,backgRed:liIndex==index}"  @click="route(index)">
                        <img :src="item[0]">
                        <span :class="{sizewhite:liIndex==index,sizeblack:liIndex!=index}">{{item[1]}}</span>
                    </button>
                </div>	
            </div>
            <div style="float:left;width:70%;" class="sougouList">
                <img src="../../../assets/img/2-indexMedia/SEM/搜狗/1.png">
                <div v-for="(item,index) in sougou" :key="index">
                    <div style="float:left;width:40px;height:40px;">
                        <img :src="item[0]">
                    </div>
                    <div style="float:left;margin-left:20px;">
                        <p style="font-size:18px;">{{item[1]}}</p>
                        <p style="font-size:14px;">{{item[2]}}</p>
                    </div>
                </div>
            </div>
        </div>
	</div>
</template>
<script>
const img1 = require("../../../assets/img/2-indexMedia/SEM/搜狗/2.png");
const img2 = require("../../../assets/img/2-indexMedia/SEM/搜狗/3.png");
const img3 = require("../../../assets/img/2-indexMedia/SEM/搜狗/4.png");
const img4 = require("../../../assets/img/2-indexMedia/SEM/搜狗/5.png");
const img5 = require("../../../assets/img/2-indexMedia/SEM/搜狗/6.png");
const img6 = require("../../../assets/img/2-indexMedia/dsp/2.png");
const img7 = require("../../../assets/img/2-indexMedia/dsp/4.png");
const img8 = require("../../../assets/img/2-indexMedia/dsp/3.png");
const img9 = require("../../../assets/img/2-indexMedia/dsp/5.png");
export default {
  data() {
    return {
      sougou: [
        [
          img1,
          "搜索推广",
          "拥有搜狗搜索，搜狗输入法，搜狗浏览器，腾讯网等众多搜索频道。"
        ],
        [
          img2,
          "行业制定推广",
          "行业制定化解决方案，提供行业专属的广告形式，缩短用户转化路径，提高转化效率。"
        ],
        [
          img3,
          "增值产品",
          "拥有搜狗管家，搜狗800免费电话，实现账户轻松管理，随时随地与客户沟通。"
        ],
        [
          img4,
          "品牌推广",
          "覆盖搜索，输入法等多场景的精准化品牌营销产品，打造多维度的品牌宣传方案。"
        ],
        [
          img5,
          "搜狗大数据",
          "依托搜狗海量数据和强大的技术优势，研究市场格局，洞悉用户，提供营销决策。"
        ]
      ],
      list: [[img6, "联系客服", img8], [img7, "查看详情", img9]],
      liIndex: 1
    };
  },
  created() {
    this.toggle(1);
  },
  methods: {
    toggle(index) {
      this.liIndex = index;
      this.list[0][0] = img6;
      this.list[1][0] = img7;
      this.list[index].splice(0, 1, this.list[index][2]);
    },
    route(index) {
      if (index == 1) {
        this.$router.push({
          path: "/view2/SEMSale",
          query: { type: "SEM", id: 5 }
        });
      } else if (index == 0) {
        this.connectQQ();
      }
    }
  }
};
</script>
<style scoped>
.OneBtn {
  margin-top: 60px;
}
.OneBtn > button:nth-child(2) {
  margin-top: 30px;
}
.parpOne {
  font-size: 36px;
  font-family: PingPang SC;
  color: rgb(34, 34, 34);
}
.parpOne > img {
  margin-left: 10px;
}
.parpThree {
  margin-top: 20px;
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.hoverBtnOne > span,
.hoverBtnTwo > span {
  margin-left: 5px;
}
.sougou dl dd span {
  font-size: 16px;
  color: rgb(34, 34, 34);
  margin-left: 10px;
  font-family: PingFang SC;
}
.sougou dl {
  margin-top: 30px;
  overflow: hidden;
}
.sougou dl dd {
  float: left;
  margin-top: 30px;
}
.sougou dl dd:nth-child(2n) {
  padding-left: 30px;
}
.sougou button {
  display: block;
  margin-left: 40px;
}
.sougouList > div {
  overflow: hidden;
  margin-top: 20px;
}
.sougouList > div > div:nth-child(2) > p:nth-child(1) {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.sougouList > div > div:nth-child(2) > p:nth-child(2) {
  font-size: 16px;
  color: rgb(34, 34, 34);
  margin-top: 3px;
}

.hoverBtnOne,
.hoverBtnTwo {
  width: 120px;
  height: 30px;
  border-radius: 15px;
}
.two {
  margin-top: 30px;
}
</style>


